<template>
	<view class="notice">
		<view class="search">
			<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="info.keyword" placeholderStyle="font-size:30rpx"
				placeholder="搜索内容" @iconClick="iconClick"></uni-easyinput>
			<view class="record" @click="goRecord">
				<image src="@/static/image/icon5.png"></image>
				<text>预警记录</text>
			</view>
		</view>
		<view class="content">
			<view class="release" @click="addNotice">
				<image src="@/static/image/notice/add.svg" />
				<text>发布新预警通知</text>
			</view>
			<view class="list">
				<xbd-warn-list v-for="(item,index) in showList" :key="index" :warning="item" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Prevention
	} from '@/api/index.js';
	export default {
		name: "notice",
		data() {
			return {
				value: "",
				showList: [
				],
				info:{
					page:1,
					perpage:10000,
					keyword:''
				}
			};
		},
		methods: {
			iconClick() {
				console.log("搜索");
				this.init()
			},
			addNotice() {
				uni.navigateTo({
					url: "/pages/notice/warn/warn",
				});
			},
			goRecord() {
				uni.navigateTo({
					url: "/pages/notice/record/record",
				});
			},
			async init(){
				const res = await Prevention.getWarningList(this.info)
				this.showList = res.data.list
				console.log(res)
			}
		},
		async onShow(){
			await this.init()
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/static/common.scss";

	::v-deep .uni-icons {
		margin-right: 20rpx;
	}
::v-deep .uni-easyinput__content{
	height: 72rpx !important;
}
	::v-deep .is-input-border {
		border: 1rpx solid #d0d6e5;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 30rpx;
	}

	.notice {
		width: 750rpx;
		box-sizing: border-box;

		.search {
			position: fixed;
			top: 0;
			width: 750rpx;
			z-index: 999;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;

			.record {
				display: flex;
				align-items: center;
				margin-top: 4rpx;
				height: 56rpx;
				padding: 0 20rpx;
				border: 2rpx solid #D0D6E5;
				border-radius: 30rpx;
				margin-left: 50rpx;
				image{
					width: 28rpx;
					height: 28rpx;
				}
				text {
					font-size: 28rpx;
					color: #000623;
				}
			}
		}

		.content {
			margin-top: 130rpx;
			padding: 30rpx;
			.release {
				width: 100%;
				height: 200rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				color: #8890a5;
				margin-bottom: 30rpx;
				font-size: 30rpx;
				border-radius: 12rpx;
				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>
